<template>
  <div style="font-size: 0.35rem">
    <van-tabs v-model:active="active">
      <van-tab title="登录">
        <div>
          <van-form @failed="onFailed">
            <van-cell-group inset>
              <!-- 通过 pattern 进行正则校验 -->
              <van-field
                v-model="dlinp"
                name="username1"
                placeholder="请输入账号"
                :rules="[{ pattern1, message: '请输入正确内容' }]"
              />
              <!-- 通过 validator 进行函数校验 -->
              <!-- <van-field
                v-model="dlmm"
                name="password"
                placeholder="请输入密码"
                :rules="[{ validator1, message: '请输入正确内容' }]"
              /> -->
              <van-field
                v-model="dlyzm"
                name="yzm"
                placeholder="请输入验证码"
                :rules="[{ validator1, message: '请输入正确内容' }]"
              />
              <p>
                接收验证码<span style="display: line-block; width: 1rem"
                  ><b id="yzm"></b></span
                ><span style="display: line-block; padding-left: 1.2rem"
                  >倒计时<span id="djs">{{t}}s</span
                ></span>
              </p>
              <button @click="phonecode()">发送验证码</button>
            </van-cell-group>
            <div style="margin: 16px">
              <van-button
                round
                block
                type="primary"
                native-type="submit"
                @click="dl()"
              >
                登录
              </van-button>
            </div>
          </van-form>
        </div>
      </van-tab>
      <van-tab title="注册">
        <div>
          <van-form @failed="onFailed">
            <van-cell-group inset>
              <!-- 通过 pattern 进行正则校验 -->
              <van-field
                v-model="zcinp"
                name="username"
                placeholder="请输入账号"
                :rules="[{ pattern, message: '请输入正确内容' }]"
              />
              <!-- 通过 validator 进行函数校验 -->
              <van-field
                v-model="zcmm"
                name="password"
                placeholder="请输入密码"
                :rules="[{ validator, message: '请输入正确内容' }]"
              />
            </van-cell-group>
            <div style="margin: 16px">
              <van-button
                round
                block
                type="primary"
                native-type="submit"
                @click="zc"
              >
                注册
              </van-button>
            </div>
          </van-form>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter()

const active = ref(0)
const dlinp = ref('')
// const dlmm = ref('')
const dlyzm = ref('')
const pattern = /^1[3-9][0-9]{9}$/
const pattern1 = /^1[3-9][0-9]{9}$/

// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = val => /\d{6}/.test(val)
const validator1 = val => /\d{6}/.test(val)

const onFailed = errorInfo => {
  console.log('failed', errorInfo)
}

const username = ref('')
const password = ref('')

const zcinp = ref('')
const zcmm = ref('')
const zc = async () => {
  await axios
    .post('/api/register', {
      username: zcinp.value,
      password: zcmm.value,
    })
    .then(res => {
      console.log(res.data)
      console.log(res)
      alert('注册成功')
      // const username= res.config.data.username
      // console.log(token)
      // console.log(username)
    })
}
let t = ref(59)
let timer = null
// 发送验证码
const phonecode = async () => {
  let data = { dlinp: dlinp.value }
  let res = await axios.post('/api/sendcode', data)
  if (res.data.code == 200) {
    document.querySelector('#yzm').innerHTML = res.data.data
    // let t = 60
    timer = setInterval(() => {
      t.value--
      if (t.value <= 0) {
        clearInterval(timer)
        return alert('请重新发送验证码')
      }
      // document.querySelector('#djs').innerHTML = `${t}s`
    }, 1000)
  }
}
//登录  -- post
const username1 = ref('')
const dl = async () => {
  await axios
    .post('/api/login', {
      params: {
        username1: dlinp.value,
        code: dlyzm.value,
      },
    })
    .then(res => {
      console.log(res)
      if (res.data.code == 200) {
        clearInterval(timer)
        console.log(res)
        localStorage.setItem('token', res.data.data)
        localStorage.setItem('username', res.data.username)
        router.push('/ding/index')

      }
    })
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
